<template>
  <div class="question-single">
    <div class="wrapper">
      <label
        @click="
          $emit('select', {
            id: question.id,
            type: 'judge',
            selectIndex: optionIndex,
          })
        "
        class="label"
        :class="[
          question.selectOption === optionIndex + 1 ? 'checked' : '',
          isShowAnswer && question.right == optionIndex + 1
            ? 'right-checked'
            : '',
          question.isWrong && question.wrongSelectOption === optionIndex
            ? 'wrong-checked'
            : '',
        ]"
        :for="option.label"
        :key="optionIndex"
        v-for="(option, optionIndex) of selectList"
      >
        <input class="label__state" type="radio" :value="option.label" />
        <div class="indicator"></div>
        <span class="label__content">
          <span class="label__topic">{{ optionIndex | formatLetter }}.</span
          >{{ option.content }}</span
        >
      </label>
    </div>

    <!-- 答案 & 解析 -->
    <view v-if="isShowAnswer" :class="question.isWrong ? 'wrong' : ''">
      <div
        class="u-font-md u-flex u-row-between u-tips-color"
        v-if="question.type !== '主观'"
      >
        <div>
          {{ question.answerIntro }}
        </div>
        <div :class="question.isWrong ? 'u-type-error' : 'u-type-primary'">
          (<u-icon
            :name="question.isWrong ? 'close' : 'checkmark'"
            :color="question.isWrong ? '#fa3534' : '#2979ff'"
          ></u-icon
          >)
        </div>
      </div>
      <view class="u-m-t-24 u-font-lg">
        <text class="u-m-r-12 u-content-color">解析:</text>
        <text class="u-main-color"> {{ question.answer || "暂无解析~" }}</text>
      </view>
    </view>
  </div>
</template>

<script>
export default {
  props: {
    question: {
      type: Object,
      default: () => {
        return {}
      },
    },
    isShowAnswer: {
      type: Boolean,
      default: false,
    },
  },
  filters: {
    formatLetter(val) {
      let letter = ""
      letter = { 1: "A", 2: "B", 3: "C", 4: "D" }[val + 1]
      return letter
    },
  },
  computed: {
    selectList() {
      let selectList = []
      ;["A", "B", "C", "D"].forEach((item) => {
        selectList = this.question["select" + item]
          ? [
              ...selectList,
              {
                label: item,
                content: this.question["select" + item],
                isSelect: false,
              },
            ]
          : selectList
      })
      return selectList
    },
  },
}
</script>

<style lang="scss" scoped>
.question-single {
  .wrapper {
    margin: 32rpx 0;
    .label {
      display: inline-flex;

      margin-bottom: 32rpx;
      padding-right: 6rpx;
      width: 100%;

      word-wrap: break-word;
      word-break: break-all;

      color: #394a56;

      align-items: center;
      &__state {
        position: absolute;
        top: 0;
        right: 0;

        opacity: 1e-5;

        pointer-events: none;
      }
      &__topic {
        margin: 0 24rpx 0 32rpx;

        font-size: 42rpx;

        color: #2c3e50;
      }
      &__content {
        font-size: 32rpx;

        opacity: 0.6;

        transition: opacity 0.2s linear, transform 0.2s ease-out;

        flex: 1;
      }
    }
  }

  .indicator {
    overflow: hidden;

    position: relative;

    margin-right: 20rpx;
    border-radius: 50%;
    width: 30px;
    height: 30px;

    background: #e0e5ec;

    box-shadow: 3px 3px 6px #bec3c9, -3px -3px 6px #ffffff;

    flex-basis: 30px;
  }
  .indicator::before,
  .indicator::after {
    position: absolute;
    top: 10%;
    left: 10%;

    border-radius: 50%;
    width: 80%;
    height: 80%;

    content: "";
  }
  .indicator::before {
    box-shadow: -4px -2px 4px 0px #d1d9e6, 4px 2px 8px 0px #ffffff;
  }
  .indicator::after {
    background-color: #ecf0f3;

    box-shadow: -4px -2px 4px 0px #ffffff, 4px 2px 8px 0px #d1d9e6;

    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
    transform: scale3d(1, 1, 1);
  }
}

.checked {
  .indicator::before {
    background: #95a5a6;
  }
  .indicator::after {
    opacity: 0;

    transform: scale3d(0.975, 0.975, 1) translate3d(0, 10%, 0);
  }
  .text {
    font-size: 32rpx;

    opacity: 1;

    transform: translate3d(8px, 0, 0);
  }
}

.right-checked {
  .indicator {
    background: #4a6df3;
  }
  .indicator::before {
    box-shadow: -4px -2px 4px 0px #ffffff, 4px 2px 8px 0px #ffffff;
  }
  .indicator::after {
    opacity: 0;

    transform: scale3d(0.975, 0.975, 1) translate3d(0, 10%, 0);
  }
  .text {
    font-size: 32rpx;

    color: #4a6df3;

    opacity: 1;

    transform: translate3d(8px, 0, 0);
  }
}

.wrong-checked {
  .indicator {
    background: #e96169;
  }
  .indicator::after {
    opacity: 0;

    transform: scale3d(0.975, 0.975, 1) translate3d(0, 10%, 0);
  }
  .text {
    font-size: 32rpx;

    color: #e96169;

    opacity: 1;

    transform: translate3d(8px, 0, 0);
  }
}
</style>
